<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>搜索引擎分析</title>

<script type="text/javascript" src="../resources/js/contants.js"></script>
<link href="../resources/css/bootstrap.min.css" rel="stylesheet">
<link href="../resources/css/font-awesome.min.css" rel="stylesheet">
<link href="../resources/css/style.min.css" rel="stylesheet">
<link href="../resources/css/dateRange.css" rel="stylesheet">
<link rel="stylesheet" href="../resources/css/layer.css" id="layui_layer_skinlayercss" style="">
<link rel="stylesheet" href="../resources/css/layer.ext.css" id="layui_layer_skinlayercss" style="">
<link rel="stylesheet" href="../resources/css/style.css" id="layui_layer_skinlayercss" style="">
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">昨日</span>
                        <h5>搜索引擎使用偏好</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="inbound_user" style="height: 500px">-</div>
                    </div>
                </div>
            </div>
            <div class="col-sm-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="pull-right">
                            <button id="user_time_show_bt" type="button" class="btn btn-default no-margins no-borders no-paddings" style="padding-bottom: 0px">
                                <span id="user_date"></span>
                                <span class="caret"></span>
                            </button>
                        </span>
                        <h5>访客搜索引擎偏好</h5>
                    </div>
                    <div class="ibox-content">
                        <div id="inbound_users" style="height: 500px">-</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../resources/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="../resources/js/dateRange.js"></script>
    <!-- highcharts js -->
    <script type="text/javascript" src="../resources/js/highcharts.js"></script>
    <script type="text/javascript" src="../resources/js/exporting.js"></script>
    <script type="text/javascript" src="../resources/js/json2.js"></script>
    <script type="text/javascript" src="../resources/js/common.js"></script>

    <script type="text/javascript">

        function loadInboundUser(sd, ed) {
            var url = COMMON_PREFIX_URL + "/stats/groupBy/inbound?metric=uv&platform=website&group_by=day,inbound";
            url += "&start_date=" + sd + "&end_date=" + ed;

            $.get(url, {}, function(data){
                if (data.code == '200' && data.data.length > 0) {
                    var uvSeries = {
                        name: '活跃访客',
                        data:[]
                    };
                    $.each(data.data, function(i, item) {
                        var inbound = item["inbound"];
                        var uv = item["$uv"];

                        addObject(uvSeries["data"], [inbound, uv], uv && uv != 0);
                    });
                    uvSeries["data"].sort();
                    showPie("inbound_user", uvSeries);
                } else {
                    $("#inbound_user").html("-");
                }
            }, "json");
        };

        function loadInboundUsers(sd, ed) {
            var url = COMMON_PREFIX_URL + "/stats/groupBy/inbound?metric=uv&platform=website&group_by=day,inbound";
            url += "&start_date=" + sd + "&end_date=" + ed;

            $.get(url, {}, function(data){
                if (data.code == '200') {
                    if (data.data.length == 0) {
                        showNoConnent("inbound_users");
                        return;
                    }
                    var categories = [];
                    var uvSeries = {};
                    $.each(data.data, function(i, item) {
                        categories.push(item["day"]);
                        var inbound = item["inbound"];
                        var uv = item["$uv"];

                        uvSeries[inbound] = uvSeries[inbound] ? uvSeries[inbound] : {name: inbound, data:[]};
                        uvSeries[inbound]["data"].push(uv);
                    });
                    categories = uniqueArray(categories);

                    var chartType = 'area';
                    var yAxisTitle = "百分比";
                    var tooltipFormat = '<span stype="color:{series.color}">{series.name}</span>:<b>{point.percentage:0.1f}%</b> ({point.y:,.0f})<br/>';
                    var tooltipShared = true;
                    if (categories.length == 0) {
                        return ;
                    } else if (categories.length == 1) {
                        chartType = "column";
                        yAxisTitle = "用户数量";
                        tooltipFormat = '<span stype="color:{series.color}">{series.name}</span>:<b>{point.y}</b><br/>';
                        tooltipShared = false;
                    }

                    var chart = new Highcharts.Chart({
                        chart: {
                            renderTo: 'inbound_users',
                            type: chartType
                        },
                        title: {
                            text: '访客搜索引擎偏好'
                        },
                        xAxis: {
                            tickmarkPlacement: 'on',
                            title: {
                                enabled: false
                            }
                        },
                        yAxis: {
                            title: {
                                text: yAxisTitle
                            }
                        },
                        tooltip: {
                            pointFormat: tooltipFormat,
                            shared: tooltipShared
                        },
                    });
                    for (var k in uvSeries) {
                        chart.addSeries(uvSeries[k]);
                    }
                    chart.xAxis[0].setCategories(categories);
                } else {
                    showNoConnent("inbound_users", "获取数据失败，失败code为:" + data.code + ", 失败信息描述为:" + data.msg);
                }
            }, "json");
        };

        $(document).ready(function(){
            var sd = date2YmdStr(getYesterDay());
            var ed = sd;
            loadInboundUser(sd, ed);

            var startDate = getStartDate();
            var endDate = getEndDate();
            // 加载数据
            loadInboundUsers(startDate, endDate);

            // 开始加载时间控件
            new AE_Date('user_date','user_time_show_bt',function(startDate, endDate){
            	loadInboundUsers(startDate, endDate);
            }, startDate, endDate);
        });

        function addObject(arr, obj, flag) {
            if (flag) {
                arr.push(obj);
            }
        }

        function showPie(id, series) {
            if (series && series["data"] && series["data"].length > 0) {
                var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: id,
                        type: 'pie'
                    },
                    tooltip: {
                        pointFormat: '{series.name}:<b>{point.percentage:0.01f}%</b>({point.y})'
                    },
                    series: []
                });
                chart.addSeries(series);
            }
        }
    </script>
</body>
</html>